{% extends "StartGroup/groupHome.html" %}
{% block portraitUpload %}{% endblock %}
{% block content %}

    <script src="/{{ media_url }}contifyuser/js/jquery-1.4.2.min.js" type="text/javascript"></script>   
    
    <script type="text/javascript">
    
     /*
     * Sets up the Dynamic Google Maps API
     */

     var map = null;
     var geocoder = null;

     function loadMap() 
     {
	     map = new GMap2(document.getElementById("map"));
	     
	     geocoder = new GClientGeocoder();
	     
	     //the exact same values as used in the loading of the static version below
	     var burnsvilleMN = new GLatLng(44.79716,-93.278046);
	     map.setCenter(burnsvilleMN, 8);

	     map.addControl(new GLargeMapControl());
	     map.addControl(new GScaleControl());
	     map.addControl(new GMapTypeControl());

	     var address = "{{ event.event_place }}";

	     geocoder.getLatLng
	     (
		     address,
		     function(point) 
		     {
			     if (!point) 
			     {
				     alert( address + " not found");
			     } 
			     else 
			     {
				     map.setCenter(point, 13);
				     var marker = new GMarker(point);
				     map.addOverlay(marker);
				     
				     GEvent.addListener( marker, "click", function()
				     {
					     map.panTo( marker.getLatLng() );
				     });

				     marker.openInfoWindowHtml( address );
			     }
		     }
	     );
	     //add any markers etc needed here
	     //var marker = new GMarker(burnsvilleMN);
	     //map.addOverlay(marker);	

	     //GEvent.addListener( marker, "click", function()
	     //{
	     //	map.panTo( marker.getLatLng() );
	     //});
     
	     //give the map a little time to fully load then remove the background
	     setTimeout('document.getElementById("map").style.backgroundImage = "";',1000);
     }
     
     function showAddress(address) 
     {
	     if (geocoder) 
	     {
		     geocoder.getLatLng
		     (
			     address,
			     function(point) 
			     {
				     if (!point) 
				     {
					     alert(address + " not found");
				     } 
				     else 
				     {
					     map.setCenter(point, 13);
					     var marker = new GMarker(point);
					     map.addOverlay(marker);
					     marker.openInfoWindowHtml(address);
				     }
			     }
		     );
	     }
     }


     /*
     * Starts the loading of the Google Maps API, once loaded will call the specified callback Function
     */
     $(function() {
	     var script = document.createElement("script");
	     script.setAttribute("src", "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAtgp6JfD0Ki3CRhQ_BptWPhT97njsBrxwAe9OzsaFhzlfxTpiDhRzN1QBC6OmxbDTsstSp7hlmhmCfg&async=2&callback=loadMap");
	     script.setAttribute("type", "text/javascript");
	     document.getElementsByTagName('head')[0].appendChild(script);
     });     
    
    
	 $(document).ready(function(){$("#submit_comment").click(function(e){
	    var comment_form = $("#comment_form")
	    jQuery.ajax({
	      url: comment_form.attr('action'),
	      type: comment_form.attr('method'),
	      data: comment_form.serialize(),
	      dataType: 'json',
	      success: function(json){
		$("#recentComment").show();
		$('#recPostDate').html(json.rpd);
		$("#recCommentTxt").html(json.rc.comment[0]);
	    },
	      error: function(xhr, ajaxOptions, thrownError){
		alert("An Error Has Occurred. Please try again.");
	      }
	    });
	  });
	  });
	 
	$(document).ready(function(){$("button.delButton").click(function(){
	    var commid = $(this).attr('commid');
	    var eveid = $(this).attr('eveid');
	    jQuery.ajax({
	      url: '/connectpeople/{{ group.group_web_address }}/groupevents/' + eveid + '/',
	      type: 'POST',
	      data: {'commid':commid},
	      dataType: 'json',
	      success: function(json){
		document.getElementById(commid).style.display="none";
	    },
	      error: function(xhr, ajaxOptions, thrownError){
		alert("An Error Has Occurred. Please try again.");
	      }
	    });
	});
	});
	
	$(document).ready(function(){$("input.rsvpImage").click(function(){
	    var rsvp = $(this).attr('rsvp');
	    var eveid = $(this).attr('eveid');
	    jQuery.ajax({
	      url: '/connectpeople/{{ group.group_web_address }}/groupevents/' + eveid + '/',
	      type: 'POST',
	      data: {'rsvp':rsvp},
	      dataType: 'json',
	      success: function(json){
		alert("success");
	    },
	      error: function(xhr, ajaxOptions, thrownError){
		alert("An Error Has Occurred. Please try again.");
	      }
	    });
	});
	});
    </script>

{% load tags %}
    <div>
    {{ event.event_name }}
    </div>
    <div>
    {{ event.event_place }}
    </div>
    <div>
    {{ event.event_date }}
    </div>
    <div>
    {{ event.event_desc }}
    </div>
    {% if permission != 'Non Member' %}
    <div>
	  Rsvp:
	  {% if event.event_date  >= curr_date %}
	       {%if rsvp_row = None%}
		    <input eveid="{{event.id}}" class="rsvpImage" title="yes" type="image" rsvp="1" src="/{{ media_url }}images/yes-icon.png"/>
		    <input eveid="{{event.id}}" class="rsvpImage" title="no" type="image" rsvp="0" src="/{{ media_url }}images/no-icon.jpg"/>	       
	       {% else %}
		    {% if rsvp_row.rsvp_val = 1 %}
			 You resvped yes. change? 
			 <input eveid="{{event.id}}" class="rsvpImage" type="image" rsvp="0" src="/{{ media_url }}images/no-icon.jpg"/>
		    {% else %}
			 You rsvped no. change? 
			 <input eveid="{{event.id}}" class="rsvpImage" type="image" rsvp="1" src="/{{ media_url }}images/yes-icon.png"/>
		    {% endif %}
	       {% endif %}
	  {% else %}
	       {% if rsvp_row != None and rsvp_row.rsvp_val = 1 %}
		    You Attended the event
	       {% else %}
		    You did not attend
	       {% endif %}
	  {% endif %}
    </div>
    
    <div>
	  <div id="map" style="background-image:url(http://maps.google.com/staticmap?center=54.55,-3.88&amp;zoom=5&amp;size=500x450&amp;key=ABQIAAAAtgp6JfD0Ki3CRhQ_BptWPhT97njsBrxwAe9OzsaFhzlfxTpiDhRzN1QBC6OmxbDTsstSp7hlmhmCfg); width: 500px; height: 450px; "> 
		  <br/><br/><br/>
		  <div style="text-align:center; padding: 20px; cursor:pointer; cursor:hand; filter: alpha(opacity=25); -moz-opacity: 0.25; opacity: 0.25; background-color:#eeeeee">
			  Loading...
		  </div>
	  </div>    
    </div>
    
    {% endif %}
    <div class="topPagination">
	    <div class="clearbreak noRightBreak">
		{% if pages.has_previous %}
		    <a href="?page={{ pages.previous_page_number }}">previous</a>
		{% endif %}
	
		<span>
		    Page {{ pages.number }} of {{ pages.paginator.num_pages }}
		</span>
	
		{% if pages.has_next %}
		    <a href="?page={{ pages.next_page_number }}">next</a>
		{% endif %}
	    </div>
	</div>
	<div class="allCommentsSection">    
	    {% if pages.object_list %}			
		    {% for comment in pages.object_list %}
			<div id = "{{comment.id}}" class="singleCommentSection">
			    <div class="nobreak singleCommentImg">
				{{ comment.photo|thumbnail }}
			    </div>
			    <div class="nobreak singleCommentTextArea">				
				<div class="singleCommentLeftTextArea">
				    <div><strong>{{comment.post_by}}</strong></div>
				    <div>{{comment.comment}}</div>
				</div>
				<div class="singleCommentRightTextArea">
				   <div> {{comment.post_date}} </div>
				   {% if permission == "Owner" or permission == "Board Member" or permission == "Assistant Board Member" or comment.post_by == curr_member.0.userid %}
				   <div>
					<button id='delete' class="delButton" eveid="{{event.id}}" commid='{{comment.id}}' type='button'>Delete</button>
				   </div>
				   {% endif %}
				</div>
			    </div>
			</div>
		    {% endfor %}
		{% else %}
		    <div class="nobreak">No Comments Listed</div>
	    {% endif %}
	</div>
	<div id="commentDivId" class="allCommentsSection">    
	    
	</div>
	<div class="noRightBreak">
	    {% if pages.has_previous %}
		<a href="?page={{ pages.previous_page_number }}">previous</a>
	    {% endif %}
    
	    <span>
		Page {{ pages.number }} of {{ pages.paginator.num_pages }}
	    </span>
    
	    {% if pages.has_next %}
		<a href="?page={{ pages.next_page_number }}">next</a>
	    {% endif %}
	</div>
     </div>
     {% if permission != 'Non Member' %}
     <div id="recentComment" class="nobreak recCommentSection" style="display:none;">
	 <div class="singleCommentSection">
	     <div class="nobreak singleCommentImg">
		 {{ curr_member.photo|thumbnail }}
	     </div>
	     <div class="nobreak singleCommentTextArea">				
		 <div class="singleCommentLeftTextArea">
		     <div><strong>RECENT COMMENT:</strong></div>
		     <div><strong>{{curr_member.user.username|user_profile}}</strong></div>
		     <div id="recCommentTxt"></div>
		 </div>
		 <div id="recPostDate" class="singleCommentRightTextArea"></div>
	     </div>
	 </div>
     </div>
     <div id="newCommentForm" class="nobreak commentFormSection">
       <div class="singleCommentSection">
	   <form id="comment_form" method="POST" action="/connectpeople/{{ group.group_web_address }}/groupevents/{{ event.id }}/">
	   <div class="nobreak commentFormFieldLine">
	       <div class="nobreak commentFormLabel"><span class="startStandardRed">* </span><span><strong>{{ post_event_comment_form.comment.label_tag }}</strong></span></div>
	       <div class="nobreak startFormField">{{ post_event_comment_form.comment }}</div>
	       <p>{{ post_event_comment_form.errors.comment }}</p>
	   </div>
	   <div class="nobreak commentFormPostButton">
	       <input id="submit_comment" type="button" value="Comment" name='createEvent'/>
	   </div>
	   </form>
       </div>
     </div>
     {% endif %}
{% endblock %}
